<template>
  <div class="app-container"><el-form ref="form" :model="form" label-width="80px">
    <!-- 用户头像 -->
    <el-upload
      class="avatar-uploader"
      action="http://lanlianhua.work:8888/api/v1/common/file_upload"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
    <!-- //用户名称 -->
    <el-form-item label="用户名">
      <el-input v-model="user.userName" />
    </el-form-item>
    <!-- //用户密码 -->
    <el-form-item label="密码">
      <el-input v-model="user.password" />
    </el-form-item>
    <!-- //用户昵称 -->
    <el-form-item label="用户昵称">
      <el-input v-model="user.nickName" />
    </el-form-item>
    <!-- 用户地址 -->
    <el-form-item label="用户地址">
      <el-cascader v-model="user.address" size="large" :options="options" @change="handleChange" />

    </el-form-item>

    <el-form-item>
      <!-- 点击事件，新增用户 -->
      <el-button type="primary" @click="onsubmit">新建用户</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form></div>
</template>

<script>
// 省市区级联数据
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
import { createUser } from '@/api/user'
export default {
  data() {
    return {
      user: {
        userName: '', // 用户名
        password: '', // 密码
        nickName: '', // 昵称
        avatar: '', // 头像
        address:''  //地址
      },
      imageUrl: '',
      form: {

        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        imageUrl: ''
        //  省市区数
      },
      options: provinceAndCityDataPlus,
      selectedOptions: []
    }
  },
  methods: {
    // 新增用户方法
    async onsubmit() {
      const result = await createUser({
        userName: this.user.userName,
        password: this.user.password,
        nickName: this.user.nickName,
        avatar: this.imageUrl, 
        address:this.address
      })
      console.log(result.address);
      const code = result.code 
      // console.log(code);
      if (code === 20000) {
        this.$router.push({
          path: 'list'
        })
      }
      console.log(result)
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },

    handleChange(value) {
      console.log(value) // value值为区域码
      // 用CodeToText转换成中文
      console.log(CodeToText[value[0]])
      console.log(CodeToText[value[1]])
    },

    // 上传头像
    handleAvatarSuccess(res, file) {
      console.log(res)
      console.log(file)
      this.imageUrl = 'http://lanlianhua.work:8888' + res.info
    }
  }
}
</script>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
